<template>
    <div class="china" ref="china-map"></div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import http from '@/http'

export default {
    data() {
        return {
            myChart: null,
            option: {
                title: {
                    text: '▎商家分布',
                    textStyle: {
                        color: 'white'
                    },
                    left: '5%',
                    top: '5%'
                },
                color: ['#0BA82C', '#2C6EFF', '#16F2D9'],
                geo: {
                    type: 'map',
                    map: 'china',
                    zoom: 1.6,
                    center: [105, 35],
                    itemStyle: {
                        areaColor: '#2E72BF'
                    }
                },
                legend: {
                    orient: 'vertical',
                    textStyle: {
                        color: 'white',
                    },
                    left: '5%',
                    bottom: '5%'
                },
                series: []
            }
        }
    },
    methods: {
        async getMapData() {
            let { data } = await axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
            // console.log(data);
            echarts.registerMap('china', data)

            let ret = await http.get('/map.json')
            // console.log(ret);
            ret.forEach(item => {
                this.option.series.push({
                    type: 'effectScatter',
                    name: item.name,
                    coordinateSystem: 'geo',
                    data: item.children
                })
            })

            this.myChart.setOption(this.option)
        }
    },
    mounted() {
        this.myChart = echarts.init(this.$refs['china-map'])
        this.getMapData()
        window.addEventListener('resize', () => {
            this.myChart.resize()
        })
    }
}
</script>

<style lang="scss" scoped>
.china {
    height: 100%;
}
</style>
